<template>
<view class="dp-business" :style="{
	color:params.color,
	backgroundColor:params.bgcolor,
	margin:(params.margin_y*2.2)+'rpx '+(params.margin_x*2.2)+'rpx',
	padding:(params.padding_y*2.2)+'rpx '+(params.padding_x*2.2)+'rpx',
	fontSize:(params.fontsize*2)+'rpx'
}">
	<view class="busbox" v-for="(item,index) in data" :key="item.id">
		<view class="businfo" @click="gotourl" :data-bid="item.bid" :data-tourl="item.tourl">
			<view class="f1"><image class="image" lazy-load="true" lazy-load-margin="0" :src="item.logo"/></view>
			<view class="f2">
				<view class="title">{{item.name}}</view>
				<view class="score" v-if="params.showpingfen!=='0'"><image class="image" :src="pre_url+'/static/img/star'+item.commentscore+'.png'"/>{{item.comment_score}}分</view>
				<view class="sales" v-if="params.showsales!=='0'"><text>销量：</text>{{item.sales}}</view>
				<view class="address" v-if="params.showjianjie=='1'"><text :decode="true">{{item.content}}</text></view>
				<view class="address flex"><view class="flex1"><text v-if="params.showaddress!=='0'">{{item.address}}</text></view><view v-if="params.showdistance" :style="{color:t('color1')}">{{item.juli}}</view></view>
				<view class="address flex flex-bt" v-if="params.showmaidan=='1'">
					<view class="btn" @tap.stop="showMap" :data-name="item.name" :data-address="item.address" :data-latitude="item.latitude" :data-longitude="item.longitude" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}">导航</view>
					<view class="btn" @tap.stop="goto" :data-url="'/pages/maidan/pay?bid='+item.bid" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}">买单</view>
					<view class="btn" @tap.stop="goto" :data-url="'tel::'+item.tel" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}">咨询电话</view>
				</view>
			</view>
		</view>
		<!-- 店铺商品 -->
		<view class="buspro" v-if="params.showproduct == 1">
			<view class="item" v-for="(item2,index2) in item.prolist" :style="'width:23%;margin-right:'+(index2%4!=3?'2%':0)" :key="item2.id" @click="goto" :data-url="item2.module == 'yuyue' ? '/activity/yuyue/product?id='+item2.id : '/pages/shop/product?id='+item2.id">
				<view class="product-pic">
					<image class="image" :src="item2.pic" mode="widthFix"/>
				</view>
				<view class="product-info">
					<view class="p1">{{item2.name}}</view>
					<view class="p2">
						<view class="p2-1">
							<text class="t1" :style="{color:t('color1')}"><text style="font-size:24rpx">￥</text>{{item2.sell_price}}<text v-if="item2.module == 'yuyue'" style="font-size:24rpx">/{{item2.danwei}}</text></text>
						</view>
					</view>
					<view v-if="item2.module == 'yuyue'" class="p4" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}" @click.stop="goto" :data-url="'/activity/yuyue/product?id='+item2.id"><text class="iconfont icon_gouwuche"></text></view>
					<view class="p4" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}" v-if="item2.module != 'yuyue' && !item2.price_type" @click.stop="buydialogChange" :data-proid="item2.id"><text class="iconfont icon_gouwuche"></text></view>
				</view>
			</view>
		</view>
		<!-- 店铺商品 -->
		<!-- 秒杀商品 -->
		<!-- <view class="buspro" v-if="params.showseckill == 1 && item.seckillprolist.length>0">
			<view class="buspro-title">限时秒杀</view>
			<scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;">
				<view class="item" v-for="(item2,index2) in item.seckillprolist" :style="'width:23%;margin-right:'+(index2%4!=3?'2%':0)" :key="item2.id" @click="goto" :data-url="'/activity/seckill/product?id='+item2.id">
					<view class="product-pic">
						<image class="image" :src="item2.pic" mode="widthFix"/>
					</view>
					<view class="product-info">
						<view class="p1">{{item2.name}}</view>
						<view class="p2">
							<view class="p2-1">
								<text class="t1" :style="{color:t('color1')}"><text style="font-size:24rpx">￥</text>{{item2.sell_price}}</text>
								<text class="t2" v-if="item2.market_price && item2.market_price>item2.sell_price"><text style="font-size:24rpx">￥</text>{{item2.market_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<!-- 秒杀商品 -->
		
		<view class="buspro" v-if="params.showscoreshop == 1 && item.scoreshopprolist.length>0">
			<scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;">
				<view class="item" v-for="(item2,index2) in item.scoreshopprolist" :style="'width:23%;margin-right:'+(index2%4!=3?'2%':0)" :key="item2.id" @click="goto" :data-url="'/activity/scoreshop/product?id='+item2.id">
					<view class="product-pic">
						<image class="image" :src="item2.pic" mode="widthFix"/>
					</view>
					<view class="product-info">
						<view class="p1">{{item2.name}}</view>
						<view class="p2">
							<view class="p2-1">
								<text class="t1" :style="{color:t('color1')}">{{item2.score_price}}{{t('积分')}}<text v-if="item2.money_price>0">+{{item2.money_price}}元</text></text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="cuxiaopro" :style="{background:'linear-gradient(180deg,rgba('+t('color1rgb')+',0.2),rgba('+t('color1rgb')+',0) 60%)'}" v-if="(params.showseckill == 1 || params.showtuangou == 1 || params.showkanjia == 1 || params.showcollage == 1 || params.showluckycollage == 1) && item.cuxiaoprolist.length>0">
			<view class="item" v-for="(item2,index2) in item.cuxiaoprolist"  :key="item2.id" @click="goto" :data-url="'/activity/'+item2.product_type+'/product?id='+item2.id">
				<view class="product-pic">
					<image class="image" :src="item2.pic" mode="widthFix"/>
				</view>
				<view class="product-info">
					<view class="p1">{{item2.name}}</view>
					<view class="p2">
						<view class="p2-1">
							<text class="t1" :style="{color:t('color1')}">
								<text v-if="item2.product_type=='tuangou'" class="t1-1">低至</text>
								<text>￥</text>{{item2.sell_price}}
							</text>
							<text class="t2" v-if="(item2.product_type=='seckill') && item2.market_price && item2.market_price>item2.sell_price"><text style="font-size:24rpx">￥</text>{{item2.market_price}}</text>
						</view>
					</view>
					<view class="p3">
						<view class="p3-1" :style="{background:'rgba('+t('color1rgb')+',0.12)',color:t('color1')}">
							<text v-if="item2.product_type=='seckill'">秒杀</text>
							<text v-if="item2.product_type=='kanjia'">砍价</text>
							<text v-if="item2.product_type=='tuangou'">团购</text>
							<text v-if="item2.product_type=='collage'">拼团</text>
							<text v-if="item2.product_type=='luckycollage'">幸运拼团</text>
						</view>
						<text class="p3-2" v-if="item2.product_type=='seckill'">已抢购{{item2.sales}}件</text>
						<text class="p3-2" v-if="item2.product_type=='kanjia'">已砍走{{item2.sales}}件</text>
						<text class="p3-2" v-if="item2.product_type=='collage' || item2.product_type=='luckycollage'">{{item2.teamnum}}人拼</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<buydialog v-if="buydialogShow" :proid="proid" @addcart="addcart" @buydialogChange="buydialogChange" :menuindex="menuindex"></buydialog>
</view>
</template>
<script>
	var app = getApp();
	export default {
		data(){
			return {
				pre_url:getApp().globalData.pre_url,
				buydialogShow:false,
			}
		},
		props: {
			menuindex:{default:-1},
			params:{},
			data:{}
		},
		methods: {
			buydialogChange: function (e) {
				if(!this.buydialogShow){
					this.proid = e.currentTarget.dataset.proid
				}
				this.buydialogShow = !this.buydialogShow;
				//console.log(this.buydialogShow);
			},
			addcart:function(){
				this.$emit('addcart');
			},
			gotourl:function(e){
				var bid = e.currentTarget.dataset.bid;
				var tourl = e.currentTarget.dataset.tourl;
				if(tourl){
					app.goto(tourl);
				}else if(this.params.intotype==1){
					app.goto('/restaurant/takeaway/index?bid='+bid);
				}else if(this.params.intotype==2){
					app.goto('/restaurant/shop/index?bid='+bid);
				}else{
					app.goto('/pagesExt/business/index?id='+bid);
				}
			}
		}
	}
</script>
<style>
.dp-business{height: auto; position: relative;}
.dp-business .busbox{background: #fff;padding:16rpx;overflow: hidden;margin-bottom:16rpx;width:100%}
.dp-business .businfo{display:flex;width:100%}
.dp-business .businfo .f1{width:200rpx;height:200rpx; margin-right:20rpx;flex-shrink:0}
.dp-business .businfo .f1 .image{ width: 100%;height:100%;border-radius:20rpx;object-fit: cover;}
.dp-business .businfo .f2{flex:1}
.dp-business .businfo .f2 .title{font-size:28rpx;font-weight:bold; color: #222;line-height:46rpx;margin-bottom:3px;}
.dp-business .businfo .f2 .score{font-size:24rpx;color:#f99716;}
.dp-business .businfo .f2 .score .image{width:140rpx; height:50rpx; vertical-align: middle;margin-bottom:3px; margin-right:3px;}
.dp-business .businfo .f2 .sales{font-size:24rpx; color:#31C88E;margin-bottom:3px;}
.dp-business .businfo .f2 .address{color:#999;font-size:24rpx;line-height:40rpx;margin-bottom:3px;}
.dp-business .businfo .btn {font-size:28rpx;line-height:56rpx;border-radius: 28rpx;padding: 0 30rpx;}

.dp-business .buspro{height: auto; position: relative;overflow: hidden; padding: 0px; display:flex;flex-wrap:wrap;margin-top:32rpx}
.dp-business .buspro .item{display: inline-block;position: relative;margin-bottom: 12rpx;background: #fff;border-radius:10rpx;overflow:hidden;}
.dp-business .buspro .product-pic {width: 100%;height:0;overflow:hidden;background: #ffffff;padding-bottom: 100%;position: relative;}
.dp-business .buspro .product-pic .image{position:absolute;top:0;left:0;width: 100%;height:auto}
.dp-business .buspro .product-info {padding:20rpx 0;position: relative;}
.dp-business .buspro .product-info .p1 {color:#323232;font-weight:bold;font-size:24rpx;line-height:36rpx;margin-bottom:10rpx;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;height:36rpx}
.dp-business .buspro .product-info .p2{display:flex;align-items:center;overflow:hidden;padding:2px 0}
.dp-business .buspro .product-info .p2-1{flex-grow:1;flex-shrink:1;height:40rpx;line-height:40rpx;overflow:hidden;white-space: nowrap}
.dp-business .buspro .product-info .p2-1 .t1{font-size:28rpx;}
.dp-business .buspro .product-info .p2-1 .t2 {margin-left:10rpx;font-size:22rpx;color: #aaa;text-decoration: line-through;/*letter-spacing:-1px*/}
.dp-business .buspro .product-info .p2-1 .t3 {margin-left:10rpx;font-size:22rpx;color: #999;}
.dp-business .buspro .product-info .p2-2{font-size:20rpx;height:40rpx;line-height:40rpx;text-align:right;padding-left:20rpx;color:#999}
.dp-business .buspro .product-info .p3{color:#999999;font-size:20rpx;margin-top:10rpx}
.dp-business .buspro .product-info .p4{width:48rpx;height:48rpx;border-radius:50%;position:absolute;display:relative;bottom:20rpx;right:0;text-align:center;}
.dp-business .buspro .product-info .p4 .icon_gouwuche{font-size:28rpx;height:48rpx;line-height:48rpx}
.dp-business .buspro .product-info .p4 .img{width:100%;height:100%;}

.dp-business .cuxiaopro{width: 100%;padding: 10rpx  20rpx;border-radius: 10rpx;margin-top: 20rpx;}
.dp-business .buspro-title{line-height: 60rpx;font-size:16px;font-weight: bold}
.dp-business .cuxiaopro .item{display: flex;align-items: center;margin-bottom: 20rpx;overflow: hidden;border-bottom: 1rpx solid #f2f2f2;}
.dp-business .cuxiaopro .product-pic{width: 140rpx;height: 140rpx;flex-shrink: 0;overflow: hidden;border-radius: 6rpx;}
.dp-business .cuxiaopro .product-pic .image{width: 100%;height:auto;object-fit: cover;border-radius: 6rpx;}
.dp-business .cuxiaopro .product-info {padding:10rpx 0;flex: 1;margin-left: 10px;align-self: flex-start;}
.dp-business .cuxiaopro .product-info .p1 {color:#323232;font-weight:bold;font-size:12rpx;line-height:18px;margin-bottom:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;height:18px}
.dp-business .cuxiaopro .product-info .p2{display:flex;align-items:center;overflow:hidden;padding:2px 0}
.dp-business .cuxiaopro .product-info .p2-1{flex-grow:1;flex-shrink:1;height:20px;line-height:20px;overflow:hidden;white-space: nowrap}
.dp-business .cuxiaopro .product-info .p2-1 .t1{font-size:30rpx;font-weight: bold;}
.dp-business .cuxiaopro .product-info .p2-1 .t1-1{font-size:24rpx;font-weight:400;}
.dp-business .cuxiaopro .product-info .p2-1 .t2 {margin-left:5px;font-size:11px;color: #aaa;text-decoration: line-through;/*letter-spacing:-1px*/}
.dp-business .cuxiaopro .product-info .p2-2{font-size:10px;height:20px;line-height:20px;text-align:right;padding-left:10px;color:#999}
.dp-business .cuxiaopro .product-info .p3{font-size:10px;margin-top:5px;display: flex;justify-content: space-between;}
.dp-business .cuxiaopro .product-info .p3-1{border:0 #FF3143 solid;border-radius:10rpx;color:#FF3143;padding:4rpx 10rpx;font-size:24rpx;min-width: 80rpx;flex-shrink: 0;text-align: center;}
.dp-business .cuxiaopro .product-info .p3-2{color:#999999;font-size:20rpx;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}

</style>